<template>
    <van-pull-refresh
      v-model="isLoading"
      success-text="刷新成功"
      @refresh="onRefresh"
    >
        <van-list
      v-model:loading="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
      offset="1"
    >
<!--        轮播图    -->
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
            <van-swipe-item v-for="item in bannerList" :key="item.id">
                <img :src="item.i" >
            </van-swipe-item>
        </van-swipe>
<!--        推荐列表-->
        <ul>
            <li v-for="item in recommendList" :key="item.r.a.id">
                <div class="top">
                    <div class="left" @click="touserdetails(item.r.a.id)">
                        <img :src="item.r?.a.p" alt="" >
                        <span>
                            {{item.r?.a.n}}
                            <i>LV.{{item.r?.a.lvl}}</i>
                        </span>
                    </div>
                    <div class="right">
                        <van-popover v-model:show="item.showPopover"  placement="left-start" >
                            <template #reference>
<!--                                <van-button type="primary">浅色风格</van-button>-->
                                <van-icon name="ellipsis" size="20px" color="#000"/>
                            </template>
                            <van-cell-group>
                                <van-cell title="内容反馈" center />
                                <van-cell title="不喜欢这篇菜谱" icon="warning-o" @click="dislike(item.r.a.id,item)" />
                            </van-cell-group>
                        </van-popover>
                    </div>
                </div>
                <img :src="item.r.p" alt="" @click="goMenuDeatail(item.r.id)">
                <div class="bottom">
                    <div class="collect">
                        <div class="left">
                            <div v-if="store.collect.indexOf(item.r.id)===-1" class="imgs">
                                <img v-for="i in item.r.collect_users" :src="i?.p">
                            </div>
                            <div v-else class="imgs">
                                <img :src="item.r?.a?.p">
                                <img v-for="i in item.r.collect_users?.slice(0,3)" :key="i.id" :src="i.p">
                            </div>
                            <span v-if="store.collect.indexOf(item.r.id)===-1">{{ item.r?.fc }}人收藏</span>
                            <span v-else>{{ item.r?.fc+1 }}人收藏</span>
                        </div>
                        <van-icon v-if="store.collect.indexOf(item.r.id)===-1" name="star-o" size="26px" color="#000" @click="addCollectList(item.r.id)" />
                        <van-icon v-else name="star" size="26px" color="#ffd700" @click="store.removeCollectList(item.r.id)"/>

                    </div>
                    <p class="title">{{item.r.stdname}}</p>
                    <ul class="tag">
                        <li v-for="i in item.r.events">
                            <van-icon name="hot-o" size="20"/>
                            <span>{{i.c}}</span>
                        </li>
                    </ul>
                </div>
            </li>
        </ul>
    </van-list>
    </van-pull-refresh>

</template>

<script lang="ts" setup>
import {useHomeStore} from '../stores/home'
import {getRecommendListAPI} from '@/api/api'
import {reactive, ref,onMounted} from "vue";
import router from '@/router';
import { useRoute } from 'vue-router';
import { useLogining, useLogin } from "../stores/index"
defineOptions({
    name: 'Recommendation',
})
let route:any=useRoute()
let uselogining: any = useLogining()
let uselogin: any = useLogin()
const store = useHomeStore()
const bannerList:any = reactive([])
const recommendList:any = reactive([])
const loading = ref(false);
const finished = ref(false);
let offset = 10
let limit = 10
let index= 0
const isLoading = ref(false);

//不喜欢这篇菜谱
const dislike = async (id:number,item:any) => {
    store.addDislikeList(id)
    item.showPopover = !item.showPopover
    for(let i:number=0;i<recommendList.length;i++){
        if(recommendList[i].r.a.id==id){
          recommendList.splice(i,1)
        }
    }
};
//下拉刷新
const onRefresh = async () => {
    //将数据清空
    bannerList.splice(0,bannerList.length)
    recommendList.splice(0,recommendList.length)
    //重新获取banner数据
    const {data:{result}} = await getRecommendListAPI(0,limit)
    bannerList.push(...result.banner)
    await onLoad()
    isLoading.value = false;
};
//上拉加载更多
const onLoad =async () => {
    const {data:{result}} = await getRecommendListAPI(offset*index,limit)
    // console.log(result.list)
    if(index==0){
        bannerList.push(...result.banner)
        //将recommendList中没有r属性的数据过滤掉
        recommendList.push(
          ...result.list.filter((item:any) => item.r )
        )
        loading.value = false;
    }
    else{
        recommendList.push(
          ...result.list.filter((item:any) => item.r )
        )
        loading.value = false;
    }
    //获取本地保存不喜欢的id数据,重新渲染数据
    let home:any=localStorage.getItem("home")
    if(home){
        home=JSON.parse(home)
    }else{
        home={}
    }
    for(let i:number=0;i<recommendList.length;i++){
        
    }
    console.log(home.dislike)
    console.log(recommendList)
    // 数据全部加载完成
    if (result.list.length === 0) {
        finished.value = true;
    }
    index++
};

// 跳转用户详情页面
let touserdetails: (id: number) => void = (id: number): void => {
    router.push({name: 'userdetails', params: {id: id,path:route.fullPath}})
}
//添加收藏
let addCollectList:(id:number)=>void=(id:number):void=>{
    if (uselogining.isLogining == 1) {
        store.addCollectList(id)
    }else{
       // 跳转到登录界面
       uselogin.updateLogin(true)
    }
}
//进入菜谱详情
let goMenuDeatail:(id:string)=>void=(id:string):void=>{
    router.push({name:"MenuDetail",params:{menuId:id,path:route.fullPath}})
}

onMounted((): void => {
    let isLogin = localStorage.getItem("isLogin")
    if (isLogin) {
        uselogining.updateLogining(isLogin)
  ;}
})
</script>

<style scoped lang="scss">
.my-swipe{
    img{
        width: 100%;
    }
}
ul{
    font-size: 16px;
    padding: 0 10px;
    li{
        margin-top: 10px;
        border-radius: 10px;
        background-color: #fff;
        .top{
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px;

            .left{
                display: flex;
                align-items: center;
                img{
                    width: 30px;
                    height: 30px;
                    border-radius: 50%;
                }
                span{
                    margin-left: 10px;
                    i{
                        //font-style: normal;
                        color: gold;
                        padding-left: 5px;
                        font-weight: bold;
                    }
                }
            }
            .right{
                van-icon{
                    padding: 5px;
                    border-radius: 50%;
                    background-color: #f6c64a;
                }
            }
        }
        img{
            width: 100%;
            border-radius: 10px;
        }
        .bottom{
            padding: 10px;
            .collect{
                display: flex;
                align-items: center;
                justify-content: space-between;
                .left{
                    display: flex;
                    align-items: center;
                    .imgs{
                        display: flex;
                        align-items: center;
                        img{
                            width: 20px;
                            height: 20px;
                            border-radius: 50%;
                            border: 2px solid #fff;
                            //从第二个图片开始，向左移动10px
                            &:nth-child(n+2){
                                margin-left: -7px;
                            }
                        }
                    }
                }

            }
            .title{
                font-size: 16px;
                font-weight: bold;
                margin: 10px 0;
            }
            .tag{
                padding: 0;
                //border-radius: 10px;
                color: #479496;
                //background-color: #f6c64a;
                display: flex;
                align-items: center;
                li{
                    display: flex;
                    align-items: center;
                    margin-right: 10px;
                    van-icon{
                        margin-right: 5px;
                    }
                }
            }
        }
    }
}
</style>